<template>
	<view>
		<u-navbar back-icon-color="#ffffff" title="可用优惠券" title-color="#ffffff" :background="background"></u-navbar>
		<view class="content">
			<block v-if="couponList.length > 0">
				<u-radio-group class="radio-group" v-model="couponIndex" @change="radioGroupChange" size="36" active-color="#18b566" width="50%" :wrap="true">
					<u-radio class="radio" @change="radioChange" v-for="(item, index) in couponList" :key="index" :name="index">
						<view class="jingdong">
							<view class="left">
								<view class="top">
									<view class="title">
										<block v-if="item.couponType == 1">
											<text class="tag">全品类券</text>
											<text class="u-line-2 u-m-t-8">平台全部商品均可使用</text>
										</block>
										<block v-else-if="item.couponType == 2">
											<text class="tag">限品类券</text>
											<text class="u-line-2 u-m-t-8">仅平台部分品类商品可使用</text>
										</block>
										<block v-else>
											<text class="tag">限品牌券</text>
											<text class="u-line-2 u-m-t-8">仅平台部分品牌商品可使用</text>
										</block>
									</view>
									<view class="bottom">
										<view class="date u-line-1">截止时间：{{ item.expireDate | date }}</view>
										<!-- 										<view class="immediate-use" @click="selectCoupon(item.id)">立即领取</view>
			-->
									</view>
								</view>
								<view class="tips">
									<view class="explain">
										<text>备注：{{ item.remarks }}{{ item.id }}</text>
									</view>
								</view>
							</view>

							<view class="right">
								<view>
									<view class="sum" v-if="item.discountType == 0">
										￥
										<text class="num">{{ item.discount }}</text>
									</view>
									<view class="sum" v-else>
										<text class="num">{{ item.discount }}</text>
										折券
									</view>
								</view>
								<view>
									<view class="type" v-if="item.conditionType == 0">满{{ item.conditions }}元可用</view>
									<view class="type" v-else>满{{ item.conditions }}件可用</view>
								</view>
							</view>
						</view>
					</u-radio>
				</u-radio-group>
			</block>
			<view v-else><u-empty class="empty" text="没有优惠券" mode="coupon"></u-empty></view>
		</view>
		<u-gap height="80" bg-color="#f3f4f6"></u-gap>
		<view class="foot-btn">
			<view class="btn-group">
				<u-button class="btn" shape="circle" @click="goback()">不使用优惠券</u-button>
				<u-button class="btn" type="success" shape="circle" @click="confirm()">完成</u-button>
			</view>
		</view>
		<u-toast ref="uToast" />
		<view><u-modal v-model="modelShow" :show-cancel-button="true" :content="modelContent"></u-modal></view>
	</view>
</template>

<script>
export default {
	components: {},
	data() {
		return {
			//
			background: {
				backgroundImage: 'linear-gradient(90deg, rgb(0,164,133), rgb(51,241,205))'
			},
			//
			couponList: [],
			couponIndex: 0,
			couponId: '',
			selectCoupon: {},
			//
			modelShow: false,
			modelContent: '没有选择优惠券'
		};
	},
	onLoad(op) {
		try {
			const token = uni.getStorageSync('token');
			if (token) {
				const userInfo = uni.getStorageSync('userInfo');
				const order_coupon_list = uni.getStorageSync('order_coupon_list');
				console.log('order_coupon_list==================');
				console.log(order_coupon_list);
				if (order_coupon_list) {
					this.couponList = order_coupon_list;
					const order_select_coupon_index = uni.getStorageSync('order_select_coupon_index');
					console.log('order_select_coupon_index==================');
					console.log(order_select_coupon_index);
					if (order_select_coupon_index) {
						this.couponIndex = order_select_coupon_index;
						this.selectCoupon = this.couponList[order_select_coupon_index];
						this.couponId = this.couponList[order_select_coupon_index].id;
					} else {
						this.couponIndex = 0;
						this.selectCoupon = this.couponList[0];
						this.couponId = this.couponList[0].id;
					}
				}
				//
			} else {
				uni.reLaunch({
					url: '/pages/login/index'
				});
			}
		} catch (e) {
			// error
		}
	},
	onReachBottom() {},
	methods: {
		goback() {
			uni.removeStorageSync('order_select_coupon_index');
			this.$u.route({
				type: 'back',
				//params: {selectCoupon:selectCoupon},
				//url: '/pages/order/creatOrder'
			});
		},
		goConfirm() {
			let _t = this;
			_t.modelShow = true;
		},
		confirm() {
			let _t = this;
			console.log(_t.couponIndex);
			console.log(_t.selectCoupon);
			if (_t.couponIndex != null && _t.selectCoupon != null) {
				console.log('11111111')
				/* const order_select_coupon_index = uni.getStorageSync('order_select_coupon_index');
				if (order_select_coupon_index) {
					uni.removeStorageSync('order_select_coupon_index');
				} */
				uni.removeStorageSync('order_select_coupon_index');
				uni.setStorageSync('order_select_coupon_index', _t.couponIndex);
				console.log('11111111')
				this.$u.route({
					type: 'redirectTo',
					url: '/pages/order/creatOrder'
				});
			} else {
				console.log('2222222')
				_t.modelShow = true;
			}
		},
		//
		// 选中某个单选框时，由radio时触发
		radioChange(e) {
			let _t = this;
			console.log('radioChange=============');
			_t.selectCoupon = _t.couponList[e];
			console.log(_t.couponIndex);
		},
		// 选中任一radio时，由radio-group触发
		radioGroupChange(e) {
			console.log('radioGroupChange=============');
		}
	}
};
</script>

<style lang="scss">
page {
	background-color: #f3f4f6;
	height: 100vh;
}
.empty {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 50vh;
}
.radio-group {
	width: 700rpx;
	.radio {
		//#ifdef APP-PLUS
		background-color: #ffffff;
		//#endif
		margin: 16rpx 0;
		padding-left: 16rpx;
	}
}

.content {
	padding: 0 24rpx;
}
.foot-btn {
	height: 128rpx;
	background-color: #ffffff;
	position: fixed;
	bottom: 24rpx;
	width: 100%;
	.btn-group {
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		.btn {
			width: 320rpx;
		}
	}
}
.jingdong {
	//#ifdef MP-WEIXIN
	margin: 8rpx 0;
	//#endif
	width: 650rpx;
	height: auto;
	background-color: #ffffff;
	display: flex;
	.right {
		width: 30%;
		//padding: 0 30rpx;
		background-color: #18b566; //rgb(94, 152, 225);
		text-align: center;
		font-size: 28rpx;
		color: #ffffff;
		.sum {
			//margin-top: 50rpx;
			font-weight: bold;
			font-size: 32rpx;
			.num {
				font-size: 80rpx;
			}
		}
		.type {
			//margin-bottom: 50rpx;
			font-size: 24rpx;
		}
	}
	.left {
		padding: 20rpx 10rpx;
		font-size: 28rpx;
		width: 70%;
		.top {
			border-bottom: 2rpx dashed $u-border-color;
			.title {
				margin-right: 60rpx;
				line-height: 40rpx;
				.tag {
					padding: 4rpx 20rpx;
					background-color: #ff7900;
					border-radius: 20rpx;
					color: #ffffff;
					font-weight: bold;
					font-size: 24rpx;
					margin-right: 10rpx;
				}
			}
			.bottom {
				display: flex;
				margin-top: 8rpx;
				align-items: center;
				justify-content: space-between;
				margin-bottom: 4rpx;
				.date {
					font-size: 20rpx;
					flex: 1;
				}
				.immediate-use {
					height: auto;
					padding: 0 8rpx;
					font-size: 24rpx;
					border-radius: 40rpx;
					line-height: 24rpx;
					color: #17933f;
					border: 2rpx solid #17933f;
				}
			}
		}
		.tips {
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-size: 24rpx;
			.transpond {
				margin-right: 10rpx;
			}
			.explain {
				display: flex;
				align-items: center;
			}
			.particulars {
				width: 30rpx;
				height: 30rpx;
				box-sizing: border-box;
				padding-top: 8rpx;
				border-radius: 50%;
				background-color: $u-type-info-disabled;
				text-align: center;
			}
		}
	}
}
</style>
